<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{margin:0;padding:0}
        body{font-family:'Microsoft YaHei';font-size:14px;color:#666;background-color:#fff;}
        li,ol,ul{list-style-type:none}
        img{border-style:none}
        a{text-decoration:none;cursor:pointer;color: #666;}
        a:hover{text-decoration:none}
        input{border:none;outline:none;color: #666;}
        i,em{font-style: normal;}
        html,body {
            font-family: 'Microsoft YaHei';
            font-size: 14px;
            color: #666;
            width: 100%;
            height:100%;
            position: relative;
            background: #fff;
        }
        a {
            text-decoration: none;
            color: #666;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        .orange {
            color: #f3af33;
        }
        .cyan {
            color: #4cfbf5;
        }

        /* 面包屑 */
        .top {
            border-bottom: 2px solid #f3af33;
            box-sizing: border-box;
            overflow: hidden;
        }
        .top .top-title {
            font-size: 18px;
            font-weight: bold;
            color: #f3af33;
            margin-bottom: 9px;
        }
        .top ul.top-list {
            margin-top: 6px;
        }
        .top ul.top-list li{
            float: left;
        }
        .top ul.top-list li a {
            color: #666;
            font-size: 14px;
            border-right: 1px solid #989898;
            display: block;
            padding: 0 14px;
        }
        .top ul.top-list li.active a {
            color: #f3af33;
        }
        .top ul.top-list li:last-child a {
            border-right: 0;
            padding-right: 0;
        }

        /* 进度条 */
        .progress-bar-group {
            padding: 0 17px 0 5px;
            width: 226px;
            margin-bottom: 37px;
        }
        .progress-bar-text {
            overflow: hidden;
            margin-bottom: 9px;
        }
        .bar-num{
            font-weight: bold;
        }
        .bar-num::after {
            content: '台';
        }
        .white .progress-out {
            position: relative;
            border-radius: 5px;
            height: 3px;
            background: #e5e5e5;
        }
        .percent-show {
            font-size: 12px;
            position: absolute;
            left:0;
            top: 8px;
        }
        .progress-in {
            height: 100%;
            width: 0;
            border-radius: 5px;
        }
        .normalRuncolor {
            background: #f3af33;
        }
        .alertcolor {
            background: #ff6f03;
        }
        .normalStopcolor {
            background: #ffcf13;
        }
        .onlinecolor {
            background: #f3af33;
        }
        .trafficWarncolor {
            background: #ffcf13;
        }
        .longTimeOfflinecolor{
            background: #fb8404;
        }

        /* 统计数据集合 */
        .statistics-boxs {
            margin: 26px 0 0;
            overflow: hidden;
            position: relative;
            width: 1200px;
        }
        .left-box {
            width: 250px;
        }
        .center-box {
            width: 600px;
            height: 600px;
            position: absolute;
            top:40px;
            left: 220px;
            z-index: 10;
        }
        .right-box {
            width: 367px;
        }
        .big-title {
            font-size: 16px;
            color: #5b667a;
        }
        .statistics-title {
            overflow: hidden;
            box-sizing: border-box;
            background: #fafafa;
            border-bottom:1px solid #ebebeb;
        }
        .title-icon {
            background: #f3af33;
            width: 3px;
            height: 14px;
        }
        .statistics-name {
            color: #5b667a;
            font-weight: bold;
            font-size: 12px;
        }

        /* 全国设备总数 */
        .deviceNum_bg {
            height: 60px;
            margin: 10px 0 32px;
            /*color: #09d4ff;*/
            font-size: 18px;
            text-align: center;
            overflow: hidden;
        }

        .deviceNum_bg p {
            height: 60px;
            min-width: 203px;
            background-size: 100%;
            padding: 0 8px;
            position: relative;
        }
        .deviceNum_bg p.cyan {
            background: url(images/totalNumbg_dark.png) no-repeat;
        }
        .deviceNum_bg p.orange {
            background: url(images/totalNumbg_white.png) no-repeat;
        }
        .deviceNum_bg p::after {
            content: '台';
            position: absolute;
            bottom: 14px;
        }
        .deviceNum {
            font-size: 48px;
            font-weight: bold;
            line-height: 54px;
            display: inline-block;
        }

        /* 联机状态 */
        .onlineState {
            margin-top: 117px;
            box-sizing: border-box;
            border:1px solid #eee;
        }
        .onlineState .statistics-title {
            height: 27px;
            line-height: 27px;
        }
        .onlineState .title-icon {
            margin: 6px 4px 0 7px;
        }
        .onlineStatebg {
            height: 284px;
            background: #fff;
        }
        .isOnline-box {
            padding: 27px 0 36px 0;
            border-bottom: 2px dotted #f2f4f5;
            margin-bottom: 27px;
        }
        .Num-text {
            padding-left: 18px;
            overflow: hidden;
        }
        .onlinetext {
            margin-right: 32px;
            margin-bottom: 32px;
        }
        .onlineNum,.offlineNum {
            font-size: 18px;
            font-weight: bold;
        }
        .white .offlinetext {
            color: #7c7c7c;
        }
        .offlineNum {
            color: #7a7b7d;
        }
        .online-bar {
            overflow: hidden;
            height: 12px;
        }
        .online-text {
            margin: 0 6px -1px 5px;
            font-size: 12px;
            color: #5b667a;
            line-height: 1;
        }
        #online.progress-out,#online .progress-in {
            border-radius: 0;
        }
        #online .percent-show {
            left: 165px;
            top: 0;
            color: #f3af33;
            line-height: 1;
        }

        /*本周新增设备统计 和本周未处理事件*/
        .totalNewEquipment,.unhandledEven {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid #eee;
        }
        .totalNewEquipment {
            height: 389px;
        }
        .unhandledEven {
            height: 276px;
            margin-top: 18px;
        }
        .totalNewEquipment .statistics-title,.unhandledEven .statistics-title {
            width: 25px;
            height: 100%;
            box-sizing: border-box;
            padding: 0 5px;
            background: #fafafa;
            border-right: 1px solid #eee;
        }
        .totalNewEquipment .title-icon,.unhandledEven .title-icon {
            margin: 6px 0 0 5px;
            transform: rotate(90deg);
        }
        .totalNewEquipmentbg,.unhandledEvenbg{
            width: 340px;
            height: 389px;
            background: #fff;
        }
        .totalNewEquipmentbg {
            height: 389px;
        }
        .unhandledEvenbg {
            height: 276px;
        }
        .totalNewEquipmentbg .big-title {
            margin: 20px 0 28px;
            text-align: center;
        }
        .totalNewEquipmentbg .big-title span {
            font-weight: bold;
        }
        .white .areaAdd-list{
            margin: 0 25px;
            color: #666;
        }
        .areaAdd-list li {

        }
        .areaAdd-list li {
            overflow: hidden;
            border-bottom: 2px dotted #f2f4f5;
            padding:0 12px 4px 6px;
            margin-bottom: 16px;
            line-height: 1;
        }
        .areaAdd-list li .area-num {
            font-size: 16px;
        }
        .areaAdd-list li .area-num .percent {
            margin-left: 5px;
            display: inline-block;
            width: 32px;
        }
        .percent {
            font-size: 12px;
        }

        /*百分比圆环*/
        .pie-boxs {
            width: 100%;
            /*height: 90px;*/
            box-sizing: border-box;
            padding: 0 15px;
            margin-top: 36px;
            overflow: hidden;
        }
        .pieBox {
            width: 63px;
            margin: 0 20px;
            float: left;
            text-align: center;
        }
        .pie {
            width: 63px;
            height: 63px;
            border:1px solid #dbdbdb;
            border-radius: 50%;
            margin-bottom: 12px;
        }
        .areatext {
            color: #999;
            font-size: 12px;
            font-weight: bold;
        }

        /* 本周未处理事件 */
        #unhandledEvenbar {
            height: 250px;
            width: 100%;
        }

        /* 地图 */
        #map {
            width: 100%;
            height: 100%;
        }

        /* 全屏与开灯按钮 */
        .clickbuttons-box {
            width: 40px;
            position: absolute;
            right: -50px;
            top: 50%;
            margin-top: -44px;
            overflow: hidden;
            text-align: center;
            background: #f6f6f6;
        }
        .clickbuttons-box a {
            cursor: pointer;
            display: inline-block;
            margin: 10px 0;
        }
        .light-btn .light-icon {
            background: url("images/light_off.png");
            width: 26px;
            height: 27px;
            display: block;
        }
        #screenScale .screen-icon {
            display: block;
            width: 20px;
            height: 20px;
            background: url("images/full_screen.png");
        }
        .commonHeader-logo{margin-right: 75px;margin-top: 12px;}
        a.cmHNb-a{color: #fff;font-weight:400;font-size: 16px;padding: 19px 27px;border-bottom: 1px solid #f3af33;display: inline-block;}
        .subtoggleMenu a{color: #fff;display: block;padding-bottom: 8px;}
        .subtoggleMenu{background: #f3af33;width: 100%;text-align: center;top:48px;left:0;display: none;font-size: 16px;padding-bottom: 9px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;z-index: 100;}
        .commonHeaderNavBox li{float: left;}
        .commonHeaderNavBox{height:60px;}
        .commonHeaderNav ul a.cur{border-bottom: 1px solid #fff;}
        .userHeader-avator img,.userHeader-avator{height: 36px;width: 36px;border-radius:36px;}
        .userHeader-menu{margin-top:9px;cursor:pointer;}
        .userHeader-name p{color: #fff;max-width:170px;}
        .userHeader-name i{margin-top: 5px;color: #fff;}
        .userHeader{margin-top: 12px;}
        #toggleshowmenu{display: none;top:41px;right:0;z-index: 100;background: #fff;width:100%;border: 1px solid #ddd;-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);width: 160px;}
        #toggleshowmenu i.i-arrow{right: 4px;top:-11px;z-index: 100;transform:rotate(180deg);-webkit-transform:rotate(180deg);color: #fff;}
        #toggleshowmenu a li i.i-set{color: #333;}
        #toggleshowmenu a{color: #333;display:block;padding: 6px 0 6px 13px;}
        #toggleshowmenu a:hover{background: #eee;}
        .yellowBg{background:#f3af33;}
        .mgc{margin:0 auto;}
        .rela{position: relative;}
        .abso{position: absolute;}
        .fixed{position: fixed;}
        .oellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
        .w1200{max-width:1200px;min-width: 1200px;}
        .clearfix:after{content: ' ';display: block;clear: both;visibility:hidden;line-height: 0;height:0;}
        .mainshowboxPtitle {border-bottom: 2px solid #f3af33;padding-top: 10px;}
        .mianshowbpt-l {
            font-size: 16px;
            color: #f3af33;
            padding: 12px 0;
            font-weight: 600;
        }
        .mianshowbpt-r a.cur {
            color: #f3af33;
        }
        .mianshowbpt-r a {
            padding: 12px 0 12px 33px;
            display: inline-block;
            cursor: pointer;
        }
        .pdl10{padding-left: 10px;}
        .pdr10{padding-right:10px}
        .masking {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 9;
            display: none;
        }
        .layerBoxing {
            width: 700px;
            height: 450px;
            border-radius: 3px;
            background: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -225px 0 0 -350px;
            z-index: 100;
            display: none;
        }
        .layerboxTitle {
            width: 96%;
            border-bottom: 2px solid #f3af33;
            padding-bottom: 8px;
            margin-bottom: 36px;
        }
        .layerboxTitle span {
            padding-top: 6px;
            font-size: 16px;
        }
        .closeLayerbox {
            width: 20px;
            height: 25px;
            background: #f3af33;
            color: #fff;
            display: inline-block;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        .mainFormbox {
            width: 509px;
        }
        .formeachlaber {
            margin-bottom: 24px;
        }
        .formeachlaber i {
            width: 84px;
            display: inline-block;
            font-style: normal;
            text-align: right;
        }
        .formeachlaber input.formenterEach {
            border-radius: 12px;
            padding: 5px 7px;
            border: 1px solid #cbcbcb;
            color: #e1a22e;
            width: 280px;
            margin-left: 14px;
        }
        .formeachlaber select.yurauthr, .formeachlaber select.yurauthr2,.formeachlaber select.yurauthr3 {
            top: 4px;
            left: 112px;
            border: none;
            width: 139px;
            color: #e1a22e;
        }
        .formeachlaber {
            margin-bottom: 24px;
        }
        .nosee {
            display: none!important;
        }
        .formeachlaber input.createdDate {
            width: 169px;
            margin-right: 29px;
        }
        .formeachlaber input.formenterEach {
            border-radius: 12px;
            padding: 5px 7px;
            border: 1px solid #cbcbcb;
            color: #e1a22e;
            width: 280px;
            margin-left: 14px;
        }
        .formeachlaber .toggleSwitchIDing {
            position: absolute;
            top: 8px;
            right: 73px;
        }
        .toggleSwitchIDing {
            position: relative;
            width: 40px;
            height: 8px;
            border-radius: 5px;
            margin: 0 auto;
        }
        .toggleSwitchIDing input {
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: -7px;
            left: 0;
            z-index: 6;
            width: 40px;
            height: 18px;
        }
        input {
            border: none;
            outline: none;
            color: #666;
        }
        .toggleSwitchIDing .btn {
            display: block;
            position: absolute;
            z-index: 4;
            top: -6px;
            left: -5px;
            width: 18px;
            height: 18px;
            border-radius: 50px;
            transition: left .25s ease;
            background: #fff;
            border: 1px solid #c4c4c4;
        }
        .toggleSwitchIDing .bg {
            display: block;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 40px;
            background: #959595;
        }
        .formSubmitBtn {
            width: 321px;
        }
        .formSubmitBtn a {
            padding: 9px 58px;
            border-radius: 50px;
            background: #f3af33;
            color: #fff;
            float: left;
        }
        .formSubmitBtn .cancelBtning {
            padding: 9px 58px;
            border-radius: 50px;
            cursor: pointer;
            background: #f4f8f9;
            border: 1px solid #e5ebed;
            color: #4d6378;
            float: right;
        }
        .txtc {
            text-align: center;
        }.spinner {
             position: relative;
             width: 60px;
             height: 60px;
             left: 50%;
             margin-left: -30px;
             top: 50%;
         }.spinner .three-bounce {
              position: relative;
              text-align: center;
              top: 50%;
              bottom: 50%;
              margin-top: -9px;
          }
        .spinner .three-bounce .one {
            -webkit-animation-delay: -.32s;
            animation-delay: -.32s;
        }
        .spinner .three-bounce>div {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 100%;
            top: 50%;
            margin-top: -9px;
            background: #f3af33;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }.spinner .three-bounce .two {
             -webkit-animation-delay: -.16s;
             animation-delay: -.16s;
         }
        .flytip-inner {
            position: fixed;
            top: 45%;
            z-index: 999999;
            width: auto;
            line-height: 24px;
            margin: 0 auto;
            background: rgba(0,0,0,.6);
            color: #fff;
            text-align: center;
            padding: 19px 14px;
            font-size: 14px;
            border-bottom: 1px solid #000;
            border-radius: 6px;
            display: inline-block;
            opacity: 0;
            transition: .3s opacity;
        }
        @keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}
    </style>
</head>
<body class="white">
<div class="commonHeader yellowBg">
    <div class="commonHeader-c clearfix mgc yellowBg w1200">
        <div class="commonHeader-logo fl"><img src="images/logo.png" alt="葆德压缩空气管理系统"></div>
        <div class="commonHeaderNav fl">
            <ul class="commonHeaderNavBox clearfix">
                <!-- <li  class="rela"><a class="cmHNb-a"></a><div class="subtoggleMenu abso"><a></a></div></li> -->
            </ul>
        </div>
        <div class="userHeader fr clearfix">
            <div class="userHeader-avator fl"><img src="images/avatar3.jpg" alt=""></div>
            <div class="userHeader-menu fl rela" id="showmyAccountMenu">
                <div id="loginUserBar" class="userHeader-name clearfix"><p id="loginUserNameText" class="pdl10 pdr10 fl oellipsis"></p><i class="xwl i-sarrow fl"></i></div>
                <ul id="toggleshowmenu" class="abso">
                    <i class="xwl i-arrow fl abso"></i>
                    <a id="yourActSetting" class="actSeting" data-code="1" href="javascript:;"><li><i class="xwl i-set pdr5"></i>账号设置</li></a>
                    <a id="exitSystem" href="javascript:;"><li><i class="xwl i-exit pdr5"></i>退出</li></a>
                </ul>
            </div>

        </div>
    </div>
</div>

<div class="container" id="allContent">
    <!-- 面包屑 -->
    <div class="mainshowboxPtitle clearfix">
        <div class="mianshowbpt-l fl"><span>首页</span></div>
        <div class="mianshowbpt-r fr"><!-- <a data-id="402" href="accoutManage.html" class="cur">账号设备</a><a data-id="403" href="#">分析报表</a> --></div>
    </div>

    <!-- 统计数据集合 -->
    <div class="statistics-boxs">
        <!-- 左 -->
        <div class="left-box fl">
            <!-- 全国设备总数 -->
            <div class="totalEquipment">
                <h3 class="big-title">全国设备总数</h3>
                <div class="deviceNum_bg">
                    <p class="orange fl">
                        <span class="deviceNum"></span>
                    </p>
                </div>
                <div class="progress-bars">
                    <!-- 正常运行 -->
                    <div class="progress-bar-group normalRun" >
                        <div class="progress-bar-text">
                            <p class="bar-title fl">正常运行</p>
                            <p class="bar-num fr"></p>
                        </div>
                        <div class="progress-out" id="normalRun">
                            <div class="percent-show">
                                <span>0</span>%
                            </div>
                            <div class="progress-in normalRuncolor"></div>
                        </div>
                    </div>

                    <!-- 报警 -->
                    <div class="progress-bar-group alert" >
                        <div class="progress-bar-text">
                            <p class="bar-title fl">报警</p>
                            <p class="bar-num fr"></p>
                        </div>
                        <div class="progress-out" id="alert">
                            <div class="percent-show">
                                <span>0</span>%
                            </div>
                            <div class="progress-in alertcolor"></div>
                        </div>
                    </div>

                    <!-- 正常停机 -->
                    <div class="progress-bar-group normalStop" >
                        <div class="progress-bar-text">
                            <p class="bar-title fl">正常停机</p>
                            <p class="bar-num fr"></p>
                        </div>
                        <div class="progress-out" id="normalStop">
                            <div class="percent-show">
                                <span>0</span>%
                            </div>
                            <div class="progress-in normalStopcolor"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 联机状态 -->
            <div class="onlineState">
                <div class="statistics-title">
                    <span class="title-icon fl"></span>
                    <h4 class="statistics-name fl">联机状态</h4>
                </div>
                <div class="onlineStatebg">
                    <div class="isOnline-box">
                        <div class="Num-text">
                            <div class="onlinetext fl">
                                在线
                                <span class="onlineNum orange"></span>
                            </div>
                            <div class="offlinetext fl">
                                离线
                                <span class="offlineNum"></span>
                            </div>
                        </div>

                        <div class="online-bar">
                            <span class="online-text fl">在线</span>
                            <div class="progress-out fl" id="online">
                                <div class="percent-show">
                                    <span>0</span>%
                                </div>
                                <div class="progress-in onlinecolor"></div>
                            </div>
                        </div>
                    </div>

                    <div class="progress-bars">
                        <!-- 流量预警 -->
                        <div class="progress-bar-group trafficWarn" >
                            <div class="progress-bar-text">
                                <p class="bar-title fl">流量预警</p>
                                <p class="bar-num fr"></p>
                            </div>
                            <div class="progress-out" id="trafficWarn">
                                <div class="percent-show">
                                    <span>0</span>%
                                </div>
                                <div class="progress-in trafficWarncolor"></div>
                            </div>
                        </div>

                        <!-- 长时间未上线 -->
                        <div class="progress-bar-group longTimeOffline" >
                            <div class="progress-bar-text">
                                <p class="bar-title fl">长时间未上线</p>
                                <p class="bar-num fr"></p>
                            </div>
                            <div class="progress-out" id="longTimeOffline">
                                <div class="percent-show">
                                    <span>0</span>%
                                </div>
                                <div class="progress-in longTimeOfflinecolor"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中 -->
        <div class="center-box fl">
            <div id="map"></div>
        </div>

        <!-- 右 -->
        <div class="right-box fr">
            <!-- 本月新增设备总数 -->
            <div class="totalNewEquipment">
                <div class="statistics-title fl">
                    <span class="title-icon fl"></span>
                    <h4 class="statistics-name fl">本月新增设备统计</h4>
                </div>

                <div class="totalNewEquipmentbg fl">
                    <h3 class="big-title">新增设备总台数：<span class="totalNum orange"></span></h3>
                    <ul class="areaAdd-list"></ul>

                    <!--圆环-->
                    <div class="pie-boxs">

                    </div>

                </div>

            </div>

            <!-- 本月未处理事件 -->
            <div class="unhandledEven">
                <div class="statistics-title fl">
                    <span class="title-icon fl"></span>
                    <h4 class="statistics-name fl">本月未处理事件</h4>
                </div>

                <div class="unhandledEvenbg fl">
                    <div id="unhandledEvenbar"></div>
                </div>
            </div>
        </div>
    </div>

    <!--全屏与开灯按钮-->
    <div class="clickbuttons-box">
        <a class="light-btn" isLight="true">
            <span class="light-icon"></span>
        </a>
        <a type="button" id="screenScale" fullScreen="false" count="1">
            <span class="screen-icon"></span>
        </a>
    </div>
</div>

<script src="js/lib/jquery.js"></script>
<script src="js/lib/echarts.min.js"></script>
<script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script src="js/cmd.js"></script>
<script src="js/myProgress.js"></script>
<!-- 开灯/关灯效果 -->
<script>
    var token = detectToken();
    var $normalRunNum= $('.normalRun .bar-num');
    var $alertNum= $('.alert .bar-num');
    var $normalStopNum= $('.normalStop .bar-num');

    var deviceNum = parseInt($('.deviceNum').text());

    var running_state = [];
    var on_line_state = [];
    var new_device = [];
    var device_event = [];

    var isLight = $('.light-btn').attr('isLight');

    renderWhitePage();//初始默认是开灯状态

    function renderWhitePage(){//**********渲染开灯时的页面效果
        //编写渲染饼状图的函数
        function renderPie(data,i){
            // 基于准备好的dom，初始化echarts实例

            var pieChart = [];
            pieChart[i] = echarts.init(document.getElementById('pie'+i));

            // 指定图表的配置项和数据
            var option = [];
            option[i] = {
                title: {
                    text: data[i].ratio + '%',
                    x:'center',
                    y:'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#5b667a'
                    }
                } ,

                series: [{
                    name: data[i].region,
                    type: 'pie',
                    radius: ['83.4%', '100%'],
                    data: [{
                        value: data[i].ratio,
                        name: '新增百分比',
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        itemStyle:{
                            normal: {
                                color: '#f3af33'
                            }
                        },
                        hoverAnimation: false
                    }, {
                        value: 100-data[i].ratio,
                        name: '',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            },
                            emphasis: {
                                color: 'transparent'
                            }
                        },
                        hoverAnimation: false
                    }]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            pieChart[i].setOption(option[i]);
        }

        //编写渲染本周未处理事件柱状图函数
        function renderBar(data){

            var provinceName = [];
            var alarmNum = [];
            var beforehand_alarmNum = [];
            var maintenanceNum = [];
            for(var i=0; i<data.length; i++){
                provinceName.push(data[i].province_name);//生成省份名称的数组
                alarmNum.push(data[i].alarm);//生成报警事件个数的数组
                beforehand_alarmNum.push(data[i].beforehand_alarm);//生成预警事件个数的数组
                maintenanceNum.push(data[i].maintenance);//生成保养事件个数的数组
            }

            // 基于准备好的dom，初始化echarts实例
            var barChart = echarts.init(document.getElementById('unhandledEvenbar'));

            var barOption = {
                color: ['#fb8404','#f3af33','#ffcf13'],
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    x: 'right',
                    padding: [12, 10, 0, 30],
                    itemGap: 8,
                    itemWidth: 6,
                    itemHeight: 2,
                    textStyle: {
                        color: '#616368',
                        fontSize: '12px',
                        fontFamily: 'Microsoft YaHei'
                    },

                    data:['报警事件','预警事件','保养事件']
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                        show:true,
                        axisLabel :{
                            interval:0,
                            textStyle: {
                                color: '#bababa',
                                fontSize: '12'
                            }
                        },
                        barGap: 0,
                        type: 'category',
                        data: provinceName,
                        axisLine: {
                            lineStyle: {
                                color: '#f7f7f7',
                                width: 1,
                                type: 'dotted'
                            }
                        },

                        axisTick: {
                            show:false,
                            alignWithLabel: false
                        }
                    }],
                yAxis: [
                    {
                        type: 'value',
                        barGap: 1,
                        padding: 0,
                        splitNumber: 3,
                        splitLine: {
                            lineStyle:{
                                color: '#f8f8f8',
                                type: 'dotted'
                            }
                        },

                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#9d9d9d',
                                fontSize: '12'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#f7f7f7',
                                width: 1,
                                type: 'dotted'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'报警事件',
                        type:'bar',
                        barWidth: '10',
                        data:alarmNum,
                        markpoint: {
                            label: {
                                normal :{
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name:'预警事件',
                        type:'bar',
                        barWidth: '10',
                        data:beforehand_alarmNum
                    },
                    {
                        name:'保养事件',
                        type:'bar',
                        barWidth: '10',
                        data:maintenanceNum
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            barChart.setOption(barOption);
        }

        //编写渲染地图的函数
        function renderMap(data){

            var myChart5 = echarts.init(document.getElementById('map'));
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = [data[i].lng, data[i].lat];
                    if (geoCoord) {
                        res.push({
                            name: data[i].province_name,
                            value: [data[i].lng, data[i].lat, data[i].device_size]
                        });
                    }
                }
                // console.log(res);
                return res;
            };

            var option5 = {
                tooltip : {
                    trigger: 'item'
                },

                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#f4f5f5',
                            borderColor: '#bebebe'
                        },
                        emphasis: {
                            areaColor: '#bababa'
                        }
                    }
                },
                series : [
                    {
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] /100;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ecac3b'
                            }
                        }
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.device_size - a.device_size;
                        }).slice(0, 6)),
                        symbolSize: function (val) {
                            return val[2] /100;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ecac3b',
                                shadowBlur: 10,
                                shadowColor: '#fffd38'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart5.setOption(option5);
        }

        function query(token){
            $.get(urls.monitorScreen,{token:token},function(data){
                console.log(data);
                if(data.code == '1') {
                    running_state = data.data.running_state;
                    on_line_state = data.data.on_line_state;

//              console.log(running_state.device_sum);

                    $('.deviceNum').text(running_state.device_sum);//设备总数
                    $normalRunNum.text(running_state.runing);//正常运行个数
                    $alertNum.text(running_state.alarm);//报警状态个数
                    $normalStopNum.text(running_state.stop);//正常停机个数

                    $('.onlineNum').text(on_line_state.online);//在线个数
//                    console.log(on_line_state.online);
//                    console.log(on_line_state.offline);
                    $('.offlineNum').text(on_line_state.offline);//离线个数
                    $('.trafficWarn .bar-num').text(on_line_state.flow);//流量预警个数
                    $('.longTimeOffline .bar-num').text(on_line_state.long_offline);//长时间不在线个数



                    var deviceNum = running_state.device_sum;
                    var normalRunPercent =running_state.run_rate;//正常运行百分比值
                    var alertPercent =running_state.alarm_rate;//报警状态百分比值
                    var normalStopPercent =running_state.stop_rate;//正常停机百分比值


                    var onlinePercent =on_line_state.on_line_rate;//在线百分比值
                    var trafficWarnPercent =on_line_state.flow_utilization;//流量比值
                    var longTimeOfflinePercent =on_line_state.long_offline_rate;//长时间不在线


                    //============进度条=============
                    $("#normalRun").myProgress({speed: 1000, percent: normalRunPercent});
                    $("#alert").myProgress({speed: 1000, percent: alertPercent});
                    $("#normalStop").myProgress({speed: 1000, percent: normalStopPercent});
                    $("#online").myProgress({speed: 1000, percent: onlinePercent, height: "12px", width: "162px"});
                    $("#trafficWarn").myProgress({speed: 1000, percent: trafficWarnPercent});
                    $("#longTimeOffline").myProgress({speed: 1000, percent: longTimeOfflinePercent});



                    //========本周新增设备统计分析========

                    new_device = data.data.new_device;
                    var newProvince = new_device.province;

                    $('.totalNum').text(new_device.total_add);//新增设备总数

                    //新增幅度最大的Top5的省份,写入html中
                    var $areaAdd_list = $('.areaAdd-list');
                    var $areaAddLi = '';
                    for(var i=0; i< newProvince.length; i++){
                        $areaAddLi += '<li>' +
                            '<div class="area-name fl">' + newProvince[i].province_name + '</div>' +
                            '<div class="area-num fr">' + newProvince[i].count +
                            '<span class="percent orange">' + newProvince[i].ratio + '%</span>' +
                            '</div>' +
                            '</li>';
                    }
                    $areaAdd_list.append($areaAddLi);//$areaAddLi插入$areaAdd_list


                    //区域统计分析（饼状图）,写入html中
                    var newRegion = new_device.region;
                    var $pie_boxs = $('.pie-boxs');
                    var pieBox = '';
                    for(var i= 0; i<newRegion.length;i++){
                        pieBox += '<div class="pieBox">'+
                            '<div id="pie'+i+'" class="pie"></div>'+
                            '<div class="areatext">' +newRegion[i].region + '</div>'+
                            '</div>';
                    }
                    $pie_boxs.append(pieBox);//$pie_boxs插入$pie_boxs

                    //循环调用渲染饼状图的函数
                    for(var i= 0; i<newRegion.length;i++){
                        renderPie(newRegion,i);
                    }




                    //========== 本周未处理事件统计分析 ========
                    device_event = data.data.device_event.device_event;
                    // console.log(device_event[0].alarm);

                    //调用渲染柱状图的函数
                    renderBar(device_event);


                    //=============  地图  =========
                    renderMap(data.data.map);
                }
            },'json')
        }

        query(token);
    }

    function renderDarkPage(){//************渲染关灯时的页面效果
        query(token);

        //编写渲染饼状图的函数
        function renderPie(data,i){
            // 基于准备好的dom，初始化echarts实例

            var pieChart = [];
            pieChart[i] = echarts.init(document.getElementById('pie'+i));

            // 指定图表的配置项和数据
            var option = [];
            var color = ['#f3af33','#fffd38','#4cfbf5'];
            option[i] = {
                title: {
                    text: data[i].ratio + '%',
                    x:'center',
                    y:'center',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                } ,

                series: [{
                    name: data[i].region,
                    type: 'pie',
                    radius: ['83.4%', '100%'],
                    data: [{
                        value: data[i].ratio,
                        name: '新增百分比',
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        itemStyle:{
                            normal: {
                                color: color[i]
                            }
                        },
                        hoverAnimation: false
                    }, {
                        value: 100-data[i].ratio,
                        name: '',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        tooltip: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            },
                            emphasis: {
                                color: 'transparent'
                            }
                        },
                        hoverAnimation: false
                    }]
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            pieChart[i].setOption(option[i]);
        }

        //编写渲染本月未处理事件柱状图函数
        function renderBar(data){

            var provinceName = [];
            var alarmNum = [];
            var beforehand_alarmNum = [];
            var maintenanceNum = [];
            for(var i=0; i<data.length; i++){
                provinceName.push(data[i].province_name);//生成省份名称的数组
                alarmNum.push(data[i].alarm);//生成报警事件个数的数组
                beforehand_alarmNum.push(data[i].beforehand_alarm);//生成预警事件个数的数组
                maintenanceNum.push(data[i].maintenance);//生成保养事件个数的数组
            }

            // 基于准备好的dom，初始化echarts实例
            var barChart = echarts.init(document.getElementById('unhandledEvenbar'));

            var barOption = {
                color: ['#ffcf13','#4cfbf5','#09d4ff'],
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    x: 'right',
                    padding: [12, 10, 0, 30],
                    itemGap: 8,
                    itemWidth: 6,
                    itemHeight: 2,
                    textStyle: {
                        color: '#616368',
                        fontSize: '12px',
                        fontFamily: 'Microsoft YaHei'
                    },

                    data:['报警事件','预警事件','保养事件']
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                        show:true,
                        axisLabel :{
                            interval:0,
                            textStyle: {
                                color: '#a7a9ab',
                                fontSize: '12'
                            }
                        },
                        barGap: 0,
                        type: 'category',
                        data: provinceName,
                        axisLine: {
                            lineStyle: {
                                color: '#2f3844',
                                width: 1,
                                type: 'dotted'
                            }
                        },

                        axisTick: {
                            show:false,
                            alignWithLabel: false
                        }
                    }],
                yAxis: [
                    {
                        type: 'value',
                        barGap: 1,
                        padding: 0,
//                            minInterval: 1,
                        splitNumber: 3,
                        splitLine: {
                            lineStyle:{
                                color: '#2f3844',
                                type: 'dotted'
                            }
                        },

                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#a7a9ab',
                                fontSize: '12'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#2f3844',
                                width: 1,
                                type: 'dotted'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'报警事件',
                        type:'bar',
                        barWidth: '10',
                        data:alarmNum,
                        markpoint: {
                            label: {
                                normal :{
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                        }
                    },
                    {
                        name:'预警事件',
                        type:'bar',
                        barWidth: '10',
                        data:beforehand_alarmNum
                    },
                    {
                        name:'保养事件',
                        type:'bar',
                        barWidth: '10',
                        data:maintenanceNum
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            barChart.setOption(barOption);
        }

        //编写渲染地图的函数
        function renderMap(data){

            var myChart5 = echarts.init(document.getElementById('map'));
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i].province_name) {
                        res.push({
                            name: data[i].province_name,
                            value: [data[i].lng, data[i].lat, data[i].device_size]
                        });
                    }
                }
//                    console.log(res);
                return res;
            };

            var option5 = {
                tooltip : {
                    trigger: 'item'
                },

                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#365e80',
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#1d415f'
                        }
                    }
                },
                series : [
                    {
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 100;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#f0ec55'
                            }
                        }
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 6)),
                        symbolSize: function (val) {
                            return val[2] /100;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#fffd38',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        zlevel: 1
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart5.setOption(option5);
        }

        function query(token){
            $.get(urls.monitorScreen,{token:token},function(data){
                console.log(data);
                if(data.code == '1') {
                    running_state = data.data.running_state;
                    on_line_state = data.data.on_line_state;

//                    console.log(running_state.device_sum);

                    $('.deviceNum').text(running_state.device_sum);//设备总数
                    $normalRunNum.text(running_state.runing);//正常运行个数
                    $alertNum.text(running_state.alarm);//报警状态个数
                    $normalStopNum.text(running_state.stop);//正常停机个数

                    $('.onlineNum').text(on_line_state.online);//在线个数
//                    console.log(on_line_state.online);
//                    console.log(on_line_state.offline);
                    $('.offlineNum').text(on_line_state.offline);//离线个数
                    $('.trafficWarn .bar-num').text(on_line_state.flow);//流量预警个数
                    $('.longTimeOffline .bar-num').text(on_line_state.long_offline);//长时间不在线个数


                    var deviceNum = running_state.device_sum;
                    var normalRunPercent =running_state.run_rate;//正常运行百分比值
                    var alertPercent =running_state.alarm_rate;//报警状态百分比值
                    var normalStopPercent =running_state.stop_rate;//正常停机百分比值


                    var onlinePercent =on_line_state.on_line_rate;//在线百分比值
                    var trafficWarnPercent =on_line_state.flow_utilization;//流量比值
                    var longTimeOfflinePercent =on_line_state.long_offline_rate;//长时间不在线


                    //============进度条=============
                    $("#normalRun").myProgress({speed: 1000, percent: normalRunPercent});
                    $("#alert").myProgress({speed: 1000, percent: alertPercent});
                    $("#normalStop").myProgress({speed: 1000, percent: normalStopPercent});
                    $("#online").myProgress({speed: 1000, percent: onlinePercent, height: "12px", width: "162px"});
                    $("#trafficWarn").myProgress({speed: 1000, percent: trafficWarnPercent});
                    $("#longTimeOffline").myProgress({speed: 1000, percent: longTimeOfflinePercent});



                    //========本月新增设备统计分析========

                    new_device = data.data.new_device;
                    $('.totalNum').text(new_device.total_add);//新增设备总数
                    var newProvince = new_device.province;

                    //新增幅度最大的Top5的省份,写入html中
                    var $areaAdd_list = $('.areaAdd-list');
                    var $areaAddLi = '';
                    for(var i=0; i< newProvince.length; i++){
                        $areaAddLi += '<li style="border-bottom-color:#1b222d">' +
                            '<div class="area-name fl">' + newProvince[i].province_name + '</div>' +
                            '<div class="area-num fr">' + newProvince[i].count +
                            '<span class="percent cyan">' + newProvince[i].ratio + '%</span>' +
                            '</div>' +
                            '</li>';
                    }
                    $areaAdd_list.append($areaAddLi);//$areaAddLi插入$areaAdd_list


                    //区域统计分析（饼状图）,写入html中
                    var newRegion = new_device.region;
                    var $pie_boxs = $('.pie-boxs');
                    var pieBox = '';
                    for(var i= 0; i<newRegion.length;i++){
                        pieBox += '<div class="pieBox">'+
                            '<div id="pie'+i+'" class="pie"></div>'+
                            '<div class="areatext">' +newRegion[i].region + '</div>'+
                            '</div>';
                    }
                    $pie_boxs.append(pieBox);//$pie_boxs插入$pie_boxs

                    //循环调用渲染饼状图的函数
                    for(var i= 0; i<newRegion.length;i++){
                        renderPie(newRegion,i);
                    }


                    //========== 本月未处理事件统计分析 ========
                    device_event = data.data.device_event.device_event;
                    // console.log(device_event[0].alarm);

                    //调用渲染柱状图的函数
                    renderBar(device_event);


                    //=============  地图  =========
                    renderMap(data.data.map);
                }
            },'json')
        }
    }




    $('.light-btn').click(function(){

        //清除页面中已经渲染好的DOM元素
        $('.areaAdd-list').empty();
        $('.pie-boxs').empty();

        isLight = !isLight;

        $(this).attr('isLight',isLight);

        if(isLight == false)
        {//true代表亮灯，false代表关灯$~$

            renderDarkPage();

            $('.light-icon').css({'background':'url("images/light_on.png")'});

            $('body').css({'background':'#020d1a url("images/jiankong_bg.jpg") center center'});
            $('.mianshowbpt-r a').css({'color':'#fff'});
            $('.mianshowbpt-r a.cur').css({'color':'#f3af33'});
            $('#allContent').css({'background':'#020d1a url("images/jiankong_bg.jpg") center center'});
            $('.big-title').css({'color':'#f1f0f0'});
            $('.deviceNum_bg p').removeClass('orange').addClass('cyan');
            $('.progress-bars').css({'color':'#fff'});

            $('.title-icon').css({'background':'#4cfbf5'});
            $('.onlineState').css({'border-color':'transparent'});
            $('.statistics-title').css({'background':'#020a14','border-color':'transparent'});
            $('.statistics-name').css({'color':'#fff'});
            $('.onlineStatebg').css({'background':'rgba(0,1,3,0.2) url("images/grid_bg.png")'});
            $('.isOnline-box').css({'border-bottom-color':'#242d36'});
            $('.onlinetext').css({'color':'#fff'});
            $('.onlineNum').removeClass('orange').addClass('cyan');
            $('.online-text').css({'color':'#fff'});
            $('.progress-out').css({'background':'#79807f'});
            $('#online .percent-show').css({'color':'#fff'});
            $('.onlinecolor').css({'background':'#4cfbf5'});

            $('.totalNewEquipment').css({'border-color':'transparent'});
            $('.unhandledEven').css({'border-color':'transparent'});
            $('.totalNewEquipmentbg').css({'background':'rgba(0,1,3,0.2) url("images/grid_bg.png")'});
            $('.unhandledEvenbg').css({'background':'rgba(0,1,3,0.2) url("images/grid_bg.png")'});
            $('.totalNum').removeClass('orange').addClass('cyan');
            $('.areaAdd-list').css({'color':'#fff'});

            $('.clickbuttons-box').css({'background':'#081622'});


        }
        else{

            renderWhitePage();

            $('.light-icon').css({'background':'url("images/light_off.png")'});

            $('body').css({'background':'#fff'});
            $('.mianshowbpt-r a').css({'color':'#666'});
            $('.mianshowbpt-r a.cur').css({'color':'#f3af33'});
            $('#allContent').css({'background':'#fff'});
            $('.big-title').css({'color':'#5b667a'});
            $('.deviceNum_bg p').removeClass('cyan').addClass('orange');
            $('.progress-bars').css({'color':'#666'});

            $('.title-icon').css({'background':'#f3af33'});
            $('.onlineState').css({'border-color':'#eee'});
            $('.statistics-title').css({'background':'#fafafa','border-color':'#ebebeb'});
            $('.statistics-name').css({'color':'#5b667a'});
            $('.onlineStatebg').css({'background':'#fff'});
            $('.isOnline-box').css({'border-bottom-color':'#f2f4f5'});
            $('.onlinetext').css({'color':'#666'});
            $('.onlineNum').removeClass('cyan').addClass('orange');
            $('.online-text').css({'color':'#5b667a'});
            $('.progress-out').css({'background':'#e5e5e5'});
            $('#online .percent-show').css({'color':'#f3af33'});
            $('.onlinecolor').css({'background':'#f3af33'});

            $('.totalNewEquipment').css({'border-color':'#eee'});
            $('.unhandledEven').css({'border-color':'#eee'});
            $('.totalNewEquipmentbg').css({'background':'#fff'});
            $('.unhandledEvenbg').css({'background':'#fff'});
            $('.totalNum').removeClass('cyan').addClass('orange');
            $('.areaAdd-list').css({'color':'#666'});

            $('.clickbuttons-box').css({'background':'#f6f6f6'});
        }
    });


</script>

<!-- 开启/关闭全屏效果 -->
<script>
    var $screenScale = $("#screenScale");
    var $allContent = $("#allContent");
    var Ofullscreen = $screenScale.attr('fullscreen');
    var Ocount = $screenScale.attr('count');
    //    console.log(Ocount);

    $screenScale.click(function(){
        Ofullscreen = !Ofullscreen;
        $screenScale.attr('fullscreen',Ofullscreen);
        Ocount++;
        if(Ocount%2 == '0') {//偶数时，开启全屏； 奇数时，关闭全屏
            fullScreen();
            $('.clickbuttons-box').css({'width':'84px',/*'background':'rgba(0,0,0,0)',*/'top':'45px','right':'-120px'});
            $('.clickbuttons-box a').css({'margin':'0 8px'});
            $('.screen-icon').css({'background':'url("images/reduce_screen.png")'});
        }else{
            fullExit();
            $('.clickbuttons-box').css({
                'width': '40px',
                /*'background': 'rgba(0,0,0,0)',*/
                'top': '50%',
                'right': '-50px'
            });
            $('.clickbuttons-box a').css({'margin': '10px 0'});
            $('.screen-icon').css({'background':'url("images/full_screen.png")'});
        }
        console.log(Ocount);
    });

    //全屏
    function fullScreen() {
        var element= document.getElementById("allContent"); //若要全屏页面中div，var element= document.getElementById("divID");
        //IE 10及以下ActiveXObject
        if (window.ActiveXObject)
        {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML W3C 提议
        else if(element.requestFullScreen) {
            element.requestFullScreen();
        }
        //IE11
        else if(element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)
        else if(element.webkitRequestFullScreen ) {
            element.webkitRequestFullScreen();
        }
        // Firefox (works in nightly)
        else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
    }

    //退出全屏
    function fullExit(){
        var element= document.getElementById("allContent");//若要全屏页面中div，var element= document.getElementById("divID");
        //IE ActiveXObject
        if (window.ActiveXObject)
        {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML5 W3C 提议
        else if(element.requestFullScreen) {
            document.exitFullscreen();
        }
        //IE 11
        else if(element.msRequestFullscreen) {
            document.msExitFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)
        else if(element.webkitRequestFullScreen ) {
            document.webkitCancelFullScreen();
        }
        // Firefox (works in nightly)
        else if(element.mozRequestFullScreen) {
            document.mozCancelFullScreen();
        }
    }


    getOnelayerMenu();
    getTwolayerMenu(101);
    $(".mianshowbpt-r a").eq(0).addClass("cur");
</script>

<script>
    // ==========面包屑点击效果==========
    $('.top-list li').click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });


    //个人中心下拉
    $("#showmyAccountMenu").toggle(
        function(){$("#toggleshowmenu").show();},
        function(){$("#toggleshowmenu").hide();}
    );
</script>



</body>
</html>
<link rel="stylesheet" type="text/css" href="css/i.css?v2">